﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Screen.Master" Inherits="System.Web.Mvc.ViewPage<dbPoll_Application.ViewModels.ReportViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Count Chart
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div id="contentContainer">

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">var webURL = false;</script>
    <script type="text/javascript" src="../../Scripts/PageControl.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);

    // Build the array of data
    var dataArray = [];
    dataArray[0] = ['Answer', 'Responses'];

    <% 
        int responseCount = 0;
        int i = 1;
        foreach (var response in Model.responses) 
        { 
            
            responseCount += response.Value;
            
            %>
                
            dataArray[<%=i%>] = ["<%=response.Key%>", <%=response.Value%>];
                
            <%
            // Check each response against the list of correct responses
            if (Model.correct != null) {
                foreach (var correct in Model.correct)
                {
                    // If the response is correct, overwrite the data with a tick
                    if (response.Key.Equals(correct))
                    {
                    %>
                        dataArray[<%=i%>] = ["✔ <%=response.Key%>", <%=response.Value%>];
                    <%
                    }
                }
            }     
    
        i++;
        
        }    
     
    %>

    function drawChart() {
        var data = google.visualization.arrayToDataTable(dataArray);
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.<%=Model.chartType%>(document.getElementById('chart_div'));
        
        chart.draw(data, { legend: 'none', width: 975, height: 600,
                                colors: [<%=Model.chartColours%>], vAxis: { minValue:0}});

        
    }

    </script>
    <div id="chartTitle"><h1><%= Model.text %></h1></div>
    <!--Div to hold the chart-->
    <div id="chart_div" align="center"></div>
    <input type="hidden" name="pollID" id="pollID" value="<%= ViewData["pollID"] %>" />
    </div>

</asp:Content>
